<template>
  <div>
    <a-row :gutter="[16, 16]">
      <a-col :span="16">
        <div>
          <a-card title="资源实例SLB" style="margin-bottom: 20px">
            <div style="display: flex">
              <div style="display: inline-block; margin: 50px">
                <p>数量</p>
                <h2>2</h2>
              </div>
              <div style="display: inline-block; margin: 50px">
                <p>运行中</p>
                <h2>2</h2>
              </div>
              <div style="display: inline-block; margin: 50px">
                <p>最近创建</p>
                <h2>1</h2>
              </div>
              <div style="display: inline-block; margin: 50px">
                <p>即将过期</p>
                <h2>1</h2>
              </div>
              <div style="display: inline-block; margin: 50px">
                <p>已过期</p>
                <h2>0</h2>
              </div>
            </div>
          </a-card>
          <a-card title="安全预警" style="margin-bottom: 20px">
            <div style="display: flex">
              <div style="text-align: center">
                <h4>暂无安全事件</h4>
              </div>
            </div>
          </a-card>
          <a-card title="实例分布">
            <div style="display: flex">
              <div style="text-align: center">
                <div style="display: inline-block; margin: 50px">
                  <p>杭州</p>
                  <h2>1台</h2>
                </div>
                <div style="display: inline-block; margin: 50px">
                  <p>北京</p>
                  <h2>1台</h2>
                </div>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col :span="8">
        <div>
          <a-card title="SSL证书" style="margin-bottom: 20px">
            <div style="display: flex">
              <div style="text-align: center">
                <a-button type="primary">快速安装SSL</a-button>
              </div>
            </div>
          </a-card>
          <a-card title="过期证书">
            <div style="display: flex">
              <div style="text-align: center">
                <h4>暂无过期证书</h4>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
